$vw:1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.carousel{
  // height: calc(100% - 180px);
  height: 100%;
  .carousel_abbreviate{
    height: 78px;
    // margin-top: px2vw(32px);
    // margin-bottom: px2vw(32px);
    display: flex;
    align-items: center;
    justify-content: center;
    .carousel_abbreviate_item{
      width: px2vw(40px);
      height: px2vw(40px);
      margin: 0 px2vw(7px);
      border-radius: px2vw(5px);
      overflow: hidden;
      img{
        position: relative;
        height: 100%;
        cursor: pointer;
        left: 50%;
        transform: translate(-50%);
      }
    }
    .is--active{
      width: px2vw(60px);
      height: px2vw(60px);
      border-radius: px2vw(7px);
      border: px2vw(3px) solid #1890ff;
      padding: 0;
    }
  }
  .carousel_show{
    // height: px2vw(650px);
    height: calc(100% - 98px);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    .carousel_show_swiper{
      overflow: hidden;
      position: relative;
      width: calc(100vw - 100px);
      height: 100%;
    }
    .aa{
      margin-left: 1%;
      margin-right: 1%;
      width: 17.5%;
    }
    .carousel_show_item{
      width: 100%;
      position: relative;
      // width: px2vw(310px);
      // height: 90% ;
      height: calc(100% - 40px);
      // // margin: 0 px2vw(22px);
      overflow: hidden;
      cursor: pointer;
      // padding: px2vw(5px);
      border-radius: px2vw(20px);
      // position: absolute;
      img{
        position: absolute;
        height: 100%;
        cursor: pointer;
        left: 50%;
        transform: translate(-50%);
      }
      &:hover{
        border: px2vw(5px) solid #1890ff;
        padding: 0;
        transition: transform .4s ease-in-out
      }
    }
    .is--active{
      // height: px2vw(660px);
      .carousel_show_item{
        // width: px2vw(360px);
        // height: px2vw(510px);
        padding: 0;
        border: px2vw(5px) solid #1890ff;
        // margin-left: 0;
      }
      // width: px2vw(360px);
      // height: px2vw(560px);
    }

    .carousel_arrow_right{
      transform:rotate(180deg)
    }
    .carousel_arrow_left, .carousel_arrow_right {
      width: px2vw(50px);
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: px2vw(95px);
        cursor: pointer;
        &:hover{
          width: 110%;
          height: px2vw(100px);
        }
      }
    }
    .carousel_show_item_title{
      // margin-bottom: px2vw(-110px);
      height: 40px;
      line-height: 40px;
      text-align: center;
      // position: absolute;
      // left: 50%;
      // transform: translateX(-50%);
      // bottom: 0;
      font-size: 32px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      // text-align: center;
      color: #ffffff;
      // padding-top: px2vw(8px);
    }
  }
  .container_dot{
    // height: px2vw(20px);
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .default{
      // width: px2vw(12px);
      // height: px2vw(12px);
      width: 12px;
      height: 12px;
      background: rgba(255,255,255,0.50);
      border-radius: 50%;
      margin: 0 px2vw(8px);
      cursor: pointer;
    }
    .is--active{
      // width: px2vw(16px);
      // height: px2vw(16px);
      width: 16px;
      height: 16px;
      background: #1890ff;
      border-radius: 50%;
      margin: 0 px2vw(8px);
      cursor: pointer;
    }
  }
}